<template>
    <transition name="el-fade-in-linear">



        <div 
            style="width:100%;height:100%;padding: 0 0;margin: 0px 0px 0px 0px;"
            v-show="show">

            <!-- <el-card 
                id="kgCalc"
                :body-style="{padding: '20px 0px'}"
                class="calc-card"
                shadow='never'>

                <div style="display:inline">
                    <span class="calc-area">
                        节点数<br/>
                        {{nodes}}
                    </span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="calc-area">
                        连接数<br/>
                        {{links}}
                    </span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="calc-area">
                        修改时间<br/>
                        {{updates}}
                    </span>
                </div>

            </el-card> -->
            
            <el-row>
                <el-col span=14>
                    <el-card id="kgProp"
                        style="width:100%;height:538px;border-width:2px;"
                        shadow='hover' >

                        <div slot="header">
                            <span class="clock">
                                <i class="el-icon-timer" style="color:green"></i> {{estimated}} min
                            </span>

                            <span style="margin-left:0px">知识库配置</span>
                            <el-button style="float: right; padding: 3px 0" type="text">恢复默认</el-button>
                        </div>

                    

                        <el-input
                            v-model="kgTitle.title" 
                            class="search"
                            style="width:40%"
                            autofocus=true
                            placeholder="抓取标题" 
                            clearable 
                        />
                        
                        <el-popconfirm 
                            title="确认清空?" 
                            icon='el-icon-warning'
                            icon-color='red'
                            @confirm="clear">
                            <el-button 
                                slot="reference" 
                                type="danger"
                                style="margin:10px"
                                :disabled="cleaning">
                                <i :class="cleanIcon"></i>&nbsp;清空
                            </el-button>
                        </el-popconfirm>

                        <el-button 
                            type="primary"
                            @click="addTitle"
                            :disabled="building">
                            <i :class="addIcon"></i>&nbsp;新增
                        </el-button>

                        <el-button 
                            type="primary"
                            @click="buildKg"
                            :disabled="building">
                            <i :class="buildIcon"></i>&nbsp;构建
                        </el-button>

                        <el-button 
                            type="primary"
                            @click="pause"
                            :disabled="building">
                            <i class="el-icon-video-pause"></i>&nbsp;终止
                        </el-button>

                        <!-- <el-button type="primary" icon="el-icon-caret-right" circle></el-button> -->

                        <el-row>
                            <el-col span=12>
                                <el-table
                                    :data="titles"
                                    style="width: 100%"
                                    height=337
                                    border
                                    highlight-current-row
                                >
                                    <el-table-column
                                        prop="title"
                                        label="抓取目标">
                                    </el-table-column>
                                    <el-table-column
                                        prop="operation"
                                        label="操作">

                                        <template slot-scope="scope">
                                                <el-button
                                                size="mini"
                                                type="primary"
                                                @click="editDrawer = true;editUser=scope.row"><i class="el-icon-edit"></i></el-button>

                                                <el-popconfirm 
                                                    :title='"确认删除 " + scope.row.title + " ?"'
                                                    icon='el-icon-warning'
                                                    icon-color='red'
                                                    @confirm='deleteTitle(scope.row.title)'>
                                                <el-button
                                                    size="mini"
                                                    type="danger"
                                                    slot="reference"
                                                    style="margin-left:2%"
                                                >
                                                    <i class="el-icon-delete"></i>

                                                </el-button>
                                                </el-popconfirm>
                                                
                                            </template>

                                    </el-table-column>
                                </el-table>
                            </el-col>
                            <el-col :span="12">
                                递归层级 <el-input-number class="recurrent-counter" :min='1' :max='3' v-model="recurrence"></el-input-number><br/>
                                
                                <!-- 数据量级 <el-select size="small"></el-select> -->

                                <!-- <div class="neoLogin">
                                    <fieldset>
                                        <legend>登录认证</legend>
                                        <div>
                                            节点&nbsp;<el-input size="mini" v-model="neoAddr" style="width:8rem;margin-bottom:8px" /><br>
                                            端口&nbsp;<el-input size="mini" v-model="neoAddr" style="width:8rem;margin-bottom:8px" /><br>
                                            用户名&nbsp;<el-input size="mini" v-model="neoAddr" style="width:8rem;margin-bottom:8px" /><br>
                                            密码&nbsp;<el-input size="mini" v-model="neoAddr" style="width:8rem" /><br>
                                            <el-button @click="updateNeo">更新</el-button>
                                            <el-button>清空</el-button>
                                        </div>
                                    </fieldset>
                                </div> -->
                                

                            </el-col>
                        </el-row>

                        

                        <div class="sim">
                            <span style="line-height:40px">
                                词义相似度
                            </span>
                            <el-slider 
                                v-model="similarity" 
                                :max=1.0 
                                :step=0.01
                                :marks="marks"
                                @change="updateSim"
                                @input="checkSim">
                            </el-slider>
                        </div>

                    </el-card>
                </el-col>

                <el-col span=10>

                    <!-- <el-card class="graph_card1" style="float:right;">

                        <div id="graph" class="graph1"></div>
                        
                    </el-card> -->

                    <div class="graph_card1">

                    
                    <div id="adminGraph" style="height: 538px;margin: 0 auto;"></div>
                    </div>
                </el-col>
                
            </el-row>
            

            <el-card style="margin:1em 0;height: 20rem" header="内置知识">
                <el-row>

                    <el-col :span="4">
                        <div class="embededTitle">
                            大洋
                        </div>

                        <div>
                            
                        </div>
                        
                    </el-col>

                    <el-col :span="4">
                        <div class="embededTitle">
                            沿海气候
                        </div>
                        
                    </el-col>

                    <el-col :span="4">
                        <div class="embededTitle">
                           海洋国家 
                        </div>
                        
                    </el-col>

                    <el-col :span="4">
                        <div class="embededTitle">
                            海洋动物
                        </div>
                        
                    </el-col>

                    <el-col :span="4">
                        <div class="embededTitle">
                            资源
                        </div>
                        
                    </el-col>

                    <el-col :span="4">
                        <div class="embededTitle">
                           a 
                        </div>
                        
                    </el-col>

                </el-row>
            </el-card>

        </div>



    </transition>
</template>

<script>
import request from '@/api/client'
import * as echarts from 'echarts';

export default {
    name: 'Knowledge',
    data() {
        return {
            // 定时器
            timer: null,
            show: false,
            kgTitle: {
                title: ''
            },
            similarity: 0.59,
            color: 'red',
            estimated: 50,
            building: false,
            cleaning: false,
            cleanIcon: 'el-icon-delete',
            buildIcon: 'el-icon-caret-right',
            addIcon: 'el-icon-plus',
            recurrence: 1,
            nodes: '-',
            links: '-',
            updates: '----',
            marks: {
                0.55: '参考值',
                0.7: '最大值'
            },
            titles: [
                
            ],
            neoAddr: 'sss',
            worker1: null,
            worker2: null
        }
    },

    inject: ['reload'],

    mounted() {
        this.show = true
        this.listTitle();

    //     let chart = document.getElementById('adminGraph')
    //     chart.style.width = '400px'
    //     chart.style.margin = '0 auto'
    //     var myChart = echarts.init(chart);
    //   myChart.setOption({
    //     title: {
    //       text: ''
    //     },
    //     tooltip: {},
    //     animationDurationUpdate: 1500,
    //     animationEasingUpdate: 'quinticInOut',
    //     series: [
    //         {
    //             type: 'graph',
    //             // layout: 'none',
    //             layout: 'force',
    //             symbolSize: 50,
    //             roam: true,
    //             force: {
    //               rpulsion: 100,
    //                gravity:0.02,
    //                edgeLength:240
    //             },
    //             draggable: true,
    //             label: {
    //                 show: true
    //             },
    //             edgeSymbol: ['circle', 'arrow'],
    //             edgeSymbolSize: [4, 10],
    //             edgeLabel: {
    //                 fontSize: 20
    //             },
    //             data: [{
    //                 name: '北大西洋和南大西洋',
    //                 // x: 0,
    //                 // y: 300
    //             }, {
    //                 name: '大西洋',
    //                 x: 200,
    //                 y: 200
    //             }, {
    //                 name: '世界第二大洋',
    //                 // x: 550,
    //                 // y: 100
    //             }, {
    //                 name: '万历十一年意大利传教士利玛窦在广东肇庆翻译的一本名叫《山海舆地全图》的世界地图册',
    //                 x: 550,
    //                 y: 500
    //             }],
    //             // links: [],
    //             links: [
    //             //   {
    //             //     source: 0,
    //             //     target: 1,
    //             //     symbolSize: [5, 20],
    //             //     label: {
    //             //         show: true
    //             //     },
    //             //     lineStyle: {
    //             //         width: 5,
    //             //         curveness: 0.2
    //             //     }
    //             // },
    //             {
    //                 source: 1,
    //                 target: 0,
    //                 label: {
    //                   formatter: '从赤道分为',
    //                   show: true
    //                 },
    //                 // lineStyle: {
    //                 //     curveness: 0.2
    //                 // }
    //             }, {
    //                 source: '大西洋',
    //                 target: '世界第二大洋',
    //                 label: {
    //                   formatter: '是',
    //                   show: true
    //                 },
    //             }, {
    //                 source: '大西洋',
    //                 target: '万历十一年意大利传教士利玛窦在广东肇庆翻译的一本名叫《山海舆地全图》的世界地图册',
    //                 label: {
    //                   formatter: '最早来自',
    //                   show: true
    //                 },
    //             }
    //             ],
    //             lineStyle: {
    //                 opacity: 0.9,
    //                 width: 2,
    //                 curveness: 0
    //             }
    //         }
    //     ]
    //   });


    },

    destroyed() {
        this.worker1 = null;
        this.worker2 = null;
    },

    methods: {
        clear() {
            this.cleanIcon = 'el-icon-loading'
            this.cleaning = true
            request.clearKg().then(resp => {
                this.$message({
                    message: '知识库已清空！',
                    type: 'success',
                    duration: 1000
                })
                this.cleanIcon = 'el-icon-delete'
                this.cleaning = false
                this.titles.splice(0)
            })
        },

        buildKg() {
            this.building = true
            this.buildIcon = 'el-icon-loading'
            this.$message({
                message: '构建任务已启动！',
                type: 'success',
                duration: 1000
            })
            
            for(var i = 0; i < this.titles.length; i++) {
                this.$message({
                    message: '开始爬取：' + this.titles[i].title,
                    duration: 1000
                })
                request.buildKg(this.titles[i].title, this.recurrence).then(resp => {
                    this.$notify({
                        title: '成功 ' + resp.status,
                        type: 'success',
                        message: '爬取 ' + this.titles[i].title + ' 完成',
                        duration: 2000
                    })
                    
                })
            }
            this.building = false
            this.buildIcon = 'el-icon-caret-right'
            //     for(var j = 0; j < 10; j++) {
            //         this.estimated = j;
            //     }
            

            // this.worker2 = this.$worker.run(function() {
            //     for(var j = 5000; j < 9000; j++) {
            //         this.estimated = j;
            //     }
            // })

            
        },

        updateSim() {
            request.updateSim(this.similarity).then(resp => {
                this.$message({
                    message: '相似度 已更新: ' + this.similarity,
                    type: 'success',
                    duration: 1000
                })
            })
        },

        checkSim() {
            var bar = document.getElementsByClassName('el-slider__bar')[0]
            var node = document.getElementsByClassName('el-slider__button')[0]
            if(this.similarity < 0.55) {
                bar.style.backgroundColor = '#f56c6c'
                node.style.borderColor = '#f56c6c'
            } else if(this.similarity > 0.7) {
                bar.style.backgroundColor = '#e6a23c'
                node.style.borderColor = '#e6a23c'
            } else {
                bar.style.backgroundColor = '#409eff'
                node.style.borderColor = '#409eff'
            }
            
        },

        listTitle() {
            request.listTitle().then(resp => {
                this.titles = resp.data.data.titles
                // while (this.titles.length < 5) {
                //     this.titles.push({title:'', operation: ''})
                // }
            })
        },

        addTitle() {
            request.addTitle(this.kgTitle).then(resp => {
                this.$message({
                    message: '抓取目标:' + this.kgTitle.title + ' 已添加',
                    type: 'success',
                    duration: 1000
                })
                this.titles.push({title: resp.data.data.title.title})
                // this.kgTitle = ''
            })
        },

        deleteTitle(title) {
            request.deleteTitle(title).then(resp => {
                // Delete the Record in 'titles'
                
                for(var i = 0; i < this.titles.length; i++) {
                    if(title == this.titles[i].title) {
                        this.titles.splice(i, 1)
                        break
                    }
                }

                this.$message({
                    message: title + ' 已删除',
                    type: 'success',
                    duration: 1000
                })


            })
        },

        // 更新 Neo4j 登录信息
        updateNeo() {
            
        },

        pause() {
            request.interruptBuild().then(resp => {
                this.$notify({
                    title: '终止',
                    type: 'info',
                    message: '已手动停止构建'
                })
            })
        },

        

    }
}
</script>

<style>

.graph_card1 {
  /* margin-bottom: 1rem; */
  height:538px;
  width: 90%;

  float: right;
}

.agp {
  height: 538px;
  width: 100%;
  margin: 0 auto;
}

.embededTitle {
    text-align: left;
    padding-left: 1rem;
}

fieldset {
    border-color: #409EF0;
    border-radius: 1rem;
}

.neoLogin {
    margin-top: 1rem;
    margin-left: 10px;
}

.sim {
    /* padding-top:10px; */
    /* margin-bottom:5px; */
    /* position: absolute; */
    /* bottom: 0px; */
    /* transform: translateX(-50%); */
}

.el-table__body tr {
    height: 47px;
    
}

.el-table__body td {
    padding: 10px 0;
}

#kgCalc .el-card__body {
    padding: 20px 0px;
}

/* .el-slider__bar {
    
} */

/* #45cb60 */
.el-slider {
    float: right;
    margin-right: 20px;
    width: 70%;
}

.el-slider__button {
    border: 4px solid
}


.el-divider--vertical {
    display: inline-block;
    width: 2px;
    height: 3em;
    margin: -30px 0px 0px 0px;
    vertical-align: middle;
    position: relative;
}

#kgProp > .el-card__body {
    /* position: fixed; */
    height: 40px;
}

.recurrent-counter .el-input-number__increase {
    /* right: 15.4%; */
    background-color: white;
    border-left: none;
}

.recurrent-counter .el-input-number__decrease {
    right: 15.4%;
    background-color: white;
    border-right: none;
}

.recurrent-counter .el-input__inner {
    box-shadow: none;
}

.recurrent-counter {
    margin-left:10px;
    box-shadow: none;
}

.text {
    font-size: 14px;
}

.clock {
    margin: 0px 0px;
    padding: 3px 5px;
    border-radius:30px;
    border: 2px solid #67c23a;
    color: #67c23a;
    float:left;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
}

.calc-area {
    width: 33.2%;
    display: inline-block;
    text-align: center;
    line-height: 25px;
}

.calc-card {
    box-shadow:inset 0 0px 15px rgba(0, 0, 0, .32), 0 0 6px rgba(0, 0, 0, .14) ;
    margin-bottom:25px;
    border-width:1px;
    border-color:white;
    background-color:#409EF0;
    color:white;
    border-radius:50px
}

</style>